import React from 'react'
import { Layout, Button, Space, Badge, Avatar, Dropdown } from 'antd'
import { BellOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'

const { Header: AntHeader } = Layout

const userMenuItems: MenuProps['items'] = [
  {
    key: 'profile',
    icon: <UserOutlined />,
    label: '个人资料',
  },
  {
    key: 'logout',
    icon: <LogoutOutlined />,
    label: '退出登录',
  },
]

const Header: React.FC = () => {
  const handleUserMenuClick = ({ key }: { key: string }) => {
    if (key === 'logout') {
      // TODO: 实现退出登录逻辑
      console.log('退出登录')
    }
  }

  return (
    <AntHeader style={{ 
      padding: '0 24px', 
      background: '#fff', 
      display: 'flex', 
      justifyContent: 'space-between',
      alignItems: 'center',
      borderBottom: '1px solid #f0f0f0'
    }}>
      <div>
        <h2 style={{ margin: 0, color: '#1890ff' }}>
          智能ELT数据集成平台
        </h2>
      </div>
      
      <Space size="middle">
        <Badge count={3}>
          <Button 
            type="text" 
            icon={<BellOutlined />} 
            size="large"
          />
        </Badge>
        
        <Dropdown 
          menu={{ items: userMenuItems, onClick: handleUserMenuClick }}
          placement="bottomRight"
        >
          <Button type="text" size="large">
            <Space>
              <Avatar size="small" icon={<UserOutlined />} />
              管理员
            </Space>
          </Button>
        </Dropdown>
      </Space>
    </AntHeader>
  )
}

export default Header
